<template>
  <div class="con_store_main">
    <el-dialog title="提示" :visible.sync="disBox" width="30%">
      <span>确定执行封禁操作？，确定则输入原因</span>
      <el-input v-model="disAbledForm.disNote" placeholder="输入原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="disBox = false">取 消</el-button>
        <el-button type="primary" @click="confirmDisabledUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 禁用操作弹窗 -->
    <el-dialog title="提示" :visible.sync="box" width="30%">
      <span>确定执行解禁操作？，确定则输入原因</span>
      <el-input v-model="ableForm.note" placeholder="输入原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="box = false">取 消</el-button>
        <el-button type="primary" @click="confirmAble">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 用户表格 -->
    <el-form v-show="isUserTable" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名称">
        <el-input v-model="formInline.userName" placeholder="输入用户名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="openAction" type="primary" icon="el-icon-search">操作记录</el-button>
      </el-form-item>
    </el-form>
    <el-table v-show="isUserTable" class="table" :data="tableData" style="width: 100%" v-loading="loading"
      :default-sort="{ prop: 'index', order: 'descending' }">
      <el-table-column type="index" label="序号" sortable width="100">
      </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名称" width="160">
      </el-table-column>
      <el-table-column class="el-status" prop="status" label="状态">
        <template slot-scope="scope">
          <div class="ic-status">
            <svg style="padding-top: 4px;padding-right: 2px;" v-if="scope.row.status === '正常'" t="1718505107697"
              class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2477"
              width="16" height="16">
              <path
                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                fill="#23f169" p-id="2478"></path>
            </svg>
            <svg style="padding-top: 4px;padding-right: 2px;"
              v-if="scope.row.status === '禁用中' || scope.row.status === '注册审核中'" t="1718505107697" class="icon"
              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2477" width="16"
              height="16">
              <path
                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                fill="#f47c6c" p-id="2478" data-spm-anchor-id="a313x.search_index.0.i4.7b9f3a817B3mtJ" class=""></path>
            </svg>
            {{ scope.row.status }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="90">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="disabledUser(scope.row)">禁用</el-button>
          <el-button type="text" size="small" @click="ableUser(scope.row)">解禁</el-button>
          <el-button type="text" size="small" @click="registerUser(scope.row)">允许注册</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 操作记录表格 -->
    <el-form v-show="!isUserTable" :inline="true" class="demo-form-inline">
      <el-form-item label="用户名称">
        <el-input v-model="actionFormInline.userName" placeholder="输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="操作类型">
        <el-input v-model="actionFormInline.actionType" placeholder="输入操作类型"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="findActionData" type="primary" icon="el-icon-search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="goBack" type="primary" icon="el-icon-search">返回</el-button>
      </el-form-item>
    </el-form>
    <el-table v-show="!isUserTable" class="table" :data="actionTableData" style="width: 100%" v-loading="loading"
      :default-sort="{ prop: 'index', order: 'descending' }">
      <el-table-column type="index" label="序号" sortable width="100">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="80">
      </el-table-column>
      <el-table-column prop="tel" label="联系方式" width="140">
      </el-table-column>
      <el-table-column prop="actionType" label="操作类型">
        <template slot-scope="scope">
          <div class="ic-status">
            <svg style="padding-top: 4px;padding-right: 2px;" v-if="scope.row.actionType === '解禁'" t="1718505107697"
              class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2477"
              width="16" height="16">
              <path
                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                fill="#23f169" p-id="2478"></path>
            </svg>
            <svg style="padding-top: 4px;padding-right: 2px;" v-if="scope.row.actionType === '禁用中'" t="1718505107697"
              class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2477"
              width="16" height="16">
              <path
                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                fill="#f47c6c" p-id="2478" data-spm-anchor-id="a313x.search_index.0.i4.7b9f3a817B3mtJ" class=""></path>
            </svg>
            {{ scope.row.actionType }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="note" label="操作原因" width="160">
      </el-table-column>
      <el-table-column prop="actionDate" label="操作时间">
      </el-table-column>
    </el-table>
    <el-pagination v-if="isUserTable" style="margin: auto; margin-top: 8px" :hide-on-single-page="value"
      :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next" :total="this.total"
      @current-change="handleSizeChange">
    </el-pagination>
    <el-pagination v-else style="margin: auto; margin-top: 8px" :hide-on-single-page="value"
      :current-page.sync="actionCurrentPage" :page-size="6" :pager-count="11" layout="prev, pager, next"
      :total="this.actionTotal" @current-change="actionHandleSizeChange">
    </el-pagination>
  </div>
</template>
<script>
import { request } from "@/network/request/request";
export default {
  mounted() {
    this.findData();
    this.findActionData();
  },
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      currentPage: 1, // 当前页码
      actionCurrentPage: 1, // 当前页码
      pageSize: 6, // 每页显示的记录数
      total: 0, // 总数目，默认设置为 0
      actionTotal: 0, // 总数目，默认设置为 0
      value: false,
      loading: false,
      isUserTable: true,
      tableData: [],
      actionTableData: [],
      formInline: {
        userName: '',
      },
      actionFormInline: {
        userName: '',
        actionType: '',
      },
      box: false,
      disBox: false,
      disAbledForm: {
        disNote: '',
        actionType: "禁用中",
        adminId: 0,
        userId: 0,
      },
      ableForm: {
        note: '',
        actionType: "解禁",
        adminId: 0,
        userId: 0,
      },
    }
  },
  methods: {
    actionHandleSizeChange() {
      this.findActionData();
    },
    handleSizeChange() {
      this.findData();
    },
    time() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 600);
    },
    goBack() {
      this.isUserTable = true;
      this.findData();
    },
    openAction() {
      this.isUserTable = false;
      this.findActionData();
    },
    disabledUser(row) {
      if (row.status === '禁用中') {
        this.$message.error("已经禁用");
      } else if (row.status === '注册审核中') {
        this.$message.error("正在审核中");
      }
      else {
        this.disAbledForm.userId = row.userId;
        this.disBox = true;
      }
    },
    ableUser(row) {
      if (row.status === '正常') {
        this.$message.error("正常状态，无需解禁");
      } else if (row.status === '注册审核中') {
        this.$message.error("正在审核中");
      } else {
        this.ableForm.userId = row.userId;
        this.box = true;
      }
    },
    async registerUser(row) {
      if (row.status === '注册审核中') {
        this.time();
        const config = {
          url: 'api/admin/user',
          method: "put",
          data: {
            account: localStorage.getItem("account"),
            userId: row.userId,
            actionType: '审核',
          }
        }
        const res = await request(config);
        if (res.data.code === 1) {
          this.findActionData();
          this.findData();
          this.disBox = false;
          this.$message.success("修改成功");
        }
      } else {
        this.$message.error("已经通过审核！");
      }
    },
    async confirmRegister() {

    },
    async findActionData() {
      this.time();
      const params = {
        userName: this.actionFormInline.userName,
        actionType: this.actionFormInline.actionType,
        currentPage: this.actionCurrentPage /* 当前页码 */,
        pageSize: this.pageSize /* 页码大小 */,
        account: localStorage.getItem("account"),
      };
      const config = {
        url: "api/admin/user",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.actionTotal = res.data.data.total; /* 得到数据的总数 */
        console.log(this.actionTotal);
        this.actionTableData = res.data.data.pageList; /* 得到数据 */
      } else {
        this.$message.error("查询失败")
      }
    },
    async findData() {
      this.time();
      const params = {
        userName: this.formInline.userName,
        currentPage: this.currentPage /* 当前页码 */,
        pageSize: this.pageSize /* 页码大小 */,
      };
      const config = {
        url: "api/user/getAll",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.total = res.data.data.total; /* 得到数据的总数 */
        this.tableData = res.data.data.pageList; /* 得到数据 */
      } else {
        this.$message.error("查询失败")
      }
    },
    async confirmDisabledUser() {
      this.time();
      const config = {
        url: 'api/admin/user',
        method: "put",
        data: {
          account: localStorage.getItem("account"),
          userId: this.disAbledForm.userId,
          actionType: this.disAbledForm.actionType,
          note: this.disAbledForm.disNote,
        }
      }
      const res = await request(config);
      if (res.data.code === 1) {
        this.findActionData();
        this.findData();
        this.disBox = false;

        this.$message.success("修改成功");
      }
    },
    async confirmAble() {
      const config = {
        url: 'api/admin/user',
        method: "put",
        data: {
          account: localStorage.getItem("account"),
          userId: this.ableForm.userId,
          actionType: this.ableForm.actionType,
          note: this.ableForm.disNote,
        }
      }
      const res = await request(config);
      if (res.data.code === 1) {
        this.$message.success("修改成功");
        this.findData();
        this.findActionData();
        this.box = false;
      }
    },
  },
}; 
</script>
<style scoped>
.con_store_main {
  height: 498px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
</style>